HTML Input Attributes
This chapter describes the different attributes for the HTML <input> element.
The value Attribute
The input value attribute specifies an initial value for an input field:
Input fields with initial (default) values:
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="John" /><br />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Doe" />
</form>
The readonly Attribute
An input field's read-only status is indicated by the input readonly attribute.
An input field that is read-only cannot be changed (however, a user can tab to it, highlight it, and copy the text from it).
When submitting the form, the value of a read-only input field will be sent!
A read-only input field:
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="John" readonly /><br />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Doe" />
</form>
The disabled Attribute
The input field will be disabled, as per the input 'disabled' property.
A disabled input field can't be used or clicked.
When submitting the form, the value of a disabled input field will not be sent!
A disabled input field:
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="John" disabled /><br />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Doe" />
</form>
The size Attribute
The visible width of an input field is specified in characters via the input size property.
The default value for size is 20.
The text, search, tel, url, email, and password input types are all compatible with the size property.
Set a width for an input field:
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" size="50" /><br />
<label for="pin">PIN:</label><br />
<input type="text" id="pin" name="pin" size="4" />
</form>
The maxlength Attribute
The input maxlength property defines the maximum amount of characters that may be entered into an input field.
When a maxlength is defined, the input field will not take more than the amount of characters supplied. This characteristic, however, does not give any feedback. As a result, if you wish to notify the user, you must write JavaScript code.
Set a width for an input field:
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" size="50" /><br />
<label for="pin">PIN:</label><br />
<input type="text" id="pin" name="pin" maxlength="4" size="4" />
</form>
The min and max Attributes
The minimum and maximum values for an input field are specified via the input min and max properties.
The min and max properties accept the following types of input: number, range, date, datetime-local, month, time, and week.
Tip: Use the max and min attributes together to create a range of legal values.
Set a width for an input field:
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02" /><br /><br />
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>
The multiple Attribute
The input multiple property indicates that a user may enter more than one value into an input field.
The multiple attribute works with the following input types: email, and file.
A file upload field that accepts multiple values:
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple />
</form>
The placeholder Attribute
The input placeholder attribute offers a brief explanation of the intended value of an input field (a sample value or a short description of the expected format).
Before the user inputs a value, the brief suggestion is presented in the input area.
Text, search, url, tel, email, and password are all supported by the placeholder attribute.
An input field with a placeholder text:
<form>
<label for="phone">Enter a phone number:</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
/>
</form>
The required Attribute
The input required attribute states that an input field must be filled out before the form can be submitted.
Text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file are all supported by the 'required' attribute.
An input field with a placeholder text:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required />
</form>
The autocomplete Attribute
The browser can guess the value using autocomplete. When a user begins typing in a field, the browser should provide fill-in alternatives depending on previously written values.
Text, search, url, tel, email, password, datepickers, range, and colour are all supported by the autocomplete attribute when used with <form> and the following <input> types: text, search, range, and color.
An HTML form with autocomplete on, and off for one input field:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" /><br /><br />
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" /><br /><br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off" /><br /><br />
<input type="submit" value="Submit" />
</form>